<template>
  <div>
    <div class="header">
      <van-icon @click="goback" size="16px" name="arrow-left" />
      <div class="title">估价结果</div>
      <div style="width: 22px"></div>
    </div>
    <div class="space"></div>
    <div class="price">
      <!-- <span>50</span>万 -->
      暂无数据
    </div>
    <div class="showpri">
      <div>
        <div class="tip">
          <!-- <span class="box up"></span><span class="up">元/m</span><span class="uptip up">2</span> -->
          <span>暂无数据</span>
        </div>
        <div>当月均价</div>
      </div>
      <div>
        <div class="tip"><span class="now">暂无</span></div>
        <div>政策指导价</div>
      </div>
      <div>
        <div class="tip">
          <!-- <span class="triangledown"></span><span class="box down">2.1%</span> -->
          <span>暂无数据</span>
        </div>
        <div>比上一月</div>
      </div>
    </div>
    <div class="tipsword">相同小区挂牌价</div>
    <div class="other">
      <div>
        <div class="tip">
          <!-- <span class="boldpri">15000</span>元/m<span class="uptip">2</span> -->
          <span>暂无数据</span>
        </div>
        <div>单价</div>
      </div>
      <div>
        <!-- <div class="tip"><span class="boldpri">45-52</span>万</div> -->
        <span>暂无数据</span>
        <div>总价</div>
      </div>
    </div>
    <div class="tipsword">当地政策新闻</div>
    <div class="shownews">
      <van-icon color="#d43b33" name="volume-o" />
      <div>当地最新房产新闻政策，<span @click="tonews">点击了解</span></div>
    </div>
    <div class="tipsword">
      相似楼盘房源
      <div @click="changebuyhouse"><van-icon name="replay" />换一批</div>
    </div>
    <div class="same">
      <div v-show="samehouselist.length != 0">
        <div
          @click="jumptobuydetail(item.houseId, item)"
          v-for="(item, index) in samehouselist"
          :key="index"
        >
          <div v-show="item.subdistrict" class="house">
            <img :src="item.houseImage" />
            <div class="intrduce">
              <div class="title1">{{ item.subdistrict }}</div>
              <div class="title2">
                <span>{{ item.houseType }}</span
                >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                >|<span>{{ item.floor }}</span>
              </div>
              <div class="tips">
                <span v-show="item.aspectType">{{ item.aspectType }}</span>
                <span v-show="item.decoration">{{ item.decoration }}</span>
                <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
              </div>
              <div v-show="item.listedPrice != '面议'" class="title3">
                {{ item.listedPrice }}万<span>
                  <span
                    >{{
                      ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                    }} </span
                  >元/m<span class="up">2</span></span
                >
              </div>
              <div v-show="item.listedPrice == '面议'" class="title3">
                {{ item.listedPrice }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="samehouselist.length == 0" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>暂无相似楼盘房源</div>
      </div>
    </div>
    <div class="btnpart">
      <div class="btn">
        <button @click="torelese" class="rant">现在出租</button>
        <button @click="tosell">立即出售</button>
      </div>
      <div class="safe"></div>
    </div>
  </div>
</template>

<script>
import { getBuyhouselist } from "../../apis/house";
import { getUserInfo } from "../../apis/user.js";
import local from "../../utils/local";
export default {
  data() {
    return {
      samehouselist: [],
      currentPage: 1,
      perPage: 10,
      loading: false,
    };
  },
  created() {
    this.getHouse();
    getUserInfo({ userId: local.get("userId") }).then((res) => {
      this.role = res.result.role;
      local.set("userInfo", JSON.stringify(res.result));
    });
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    torelese() {
      if (local.get("userId")) {
        if (this.info.role == 4 || this.info.role == 3) {
          this.$dialog
            .alert({
              title: "温馨提示",
              message: "您当前身份无法发布租房房源,如有问题请咨询客服",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign:"left"
            })
            .then(() => {});
        } else {
          this.$router.push({ path: "/releasehouse" });
        }
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    tosell() {
      if (local.get("userId")) {
        if (
          this.info.role == 0 ||
          this.info.role == 1 ||
          this.info.role == 3 ||
          this.info.role == 5
        ) {
          this.$router.push({ path: "/buysell" });
        } else if (this.info.role == 2 || this.info.role == 4) {
          this.$dialog
            .alert({
              title: "温馨提示",
              message: "您当前身份无法发布业主房源,如有问题请咨询客服",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign:"left"
            })
            .then(() => {});
        }
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    tonews() {
      this.$router.push({ path: "/newslist" });
    },
    async getHouse() {
      if (local.get("citycode")) {
        await getBuyhouselist({
          citycode: local.get("citycode"),
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          this.samehouselist = response.result.list;
          if (this.samehouselist.length == 10) {
            this.loading = true;
          }
        });
      } else {
        await getBuyhouselist({
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          this.samehouselist = response.result.list;
          if (this.samehouselist.length == 10) {
            this.loading = true;
          }
        });
      }
    },
    jumptobuydetail(e, item) {
      let list = JSON.parse(local.get("todaybuyhouselist"));
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId == item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      local.set("todaybuyhouselist", JSON.stringify(list));
      local.set("houseId", e);
      this.$router.push({ path: "/buyhousedetail" });
    },
    changebuyhouse() {
      if (this.loading) {
        this.currentPage++;
        if (local.get("citycode")) {
          getBuyhouselist({
            citycode: local.get("citycode"),
            currentPage: this.currentPage,
            perPage: this.perPage,
          }).then((response) => {
            if (response.result.list.length != 10) {
              this.loading = false;
            }
            this.samehouselist = response.result.list;
          });
        } else {
          getBuyhouselist({
            currentPage: this.currentPage,
            perPage: this.perPage,
          }).then((response) => {
            if (response.result.list.length != 10) {
              this.loading = false;
            }
            this.samehouselist = response.result.list;
          });
        }
      } else {
        this.$toast("没有更多房源了");
      }
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
  }
}
.space {
  height: 50px;
}
.price {
  text-align: center;
  margin: 10px 0 20px;
  font-size: 20px;
  color: #d43b33;
  span {
    font-weight: bold;
    font-size: 45px;
  }
}
.showpri {
  display: flex;
  justify-content: space-between;
  margin: 0 15px;
  align-items: center;
  > div {
    text-align: center;
    width: 30%;
    font-size: 12px;
    color: #333;
    &:nth-child(2) {
      border-left: 1px solid #f1f1f1;
      border-right: 1px solid #f1f1f1;
    }
    .tip {
      display: flex;
      align-items: center;
      justify-content: center;
      .now {
        font-weight: bold;
        font-size: 16px;
      }
      .box {
        font-size: 14px;
        font-weight: bold;
      }
      .up {
        color: #d43b33;
      }
      .down {
        color: #22a44c;
      }
      .uptip {
        font-size: 12px;
        vertical-align: super;
        transform: scale(calc(10 / 12));
      }
      .triangledown {
        width: 0;
        height: 0;
        border-top: 6px solid #22a44c;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
      }
    }
  }
}
.tipsword {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: normal;
  }
}
.other {
  display: flex;
  justify-content: space-between;
  margin: 0 15px;
  align-items: center;
  background-color: #f6feff;
  padding: 30px 0;
  > div {
    text-align: center;
    width: 50%;
    font-size: 12px;
    color: #333;
    .tip {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #d43b33;
      .boldpri {
        font-weight: bold;
        font-size: 25px;
      }
      .uptip {
        vertical-align: span-top;
        font-size: 10px;
      }
    }
  }
}
.same {
  padding-bottom: 80px;
  margin: 10px 15px;
  .house {
    background-color: #fff;
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 120px;
      height: 110px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 0px 2px;
          border: 1px solid #45b7cb;
          color: #45b7cb;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          color: #999;
          font-size: 12px;
          margin-left: 6px;
        }
      }
    }
    .up {
      margin: 0px !important;
      font-size: 12px;
      vertical-align: super;
      transform: scale(calc(10 / 12));
    }
  }
  .nohouse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 150px;
    }
    div {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-top: 20px;
    }
  }
}
.shownews {
  margin: 0 15px;
  font-size: 13px;
  display: flex;
  align-items: center;
  span {
    color: #45b7cb;
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 15px;
    button {
      border: none;
      margin: 0;
      height: 40px;
      width: 45%;
      border-radius: 30px;
      color: #fff;
      font-size: 16px;
      background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
    }
    .rant {
      width: 40%;
      background-image: none;
      background-color: #fff;
      border: 1px solid #ccc;
      color: #ccc;
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
